<template>
    <div>
        <div class="list-wrapper">
            <table class="list-table" border="0" cellspacing="0" cellpadding="0">
                <thead>
                <tr>
                    <th style="font-weight: 600;width: 15%">
                        <span class="icon add" @click="openAddForm"></span>
                        添加新闻
                    </th>
                    <th width="10%">序号</th>
                    <th>发布日期</th>
                    <th>标题</th>
                    <th>标题图</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(item,index) in list" :key="item.id">
                    <td>
                        <span class="icon edit" @click="edit(item.id)"></span>
                        <span class="icon del1" @click="Del(item.id)"></span>
                    </td>
                    <td>{{index + 1}}</td>
                    <td>{{item.date}}</td>
                    <td>{{item.title}}</td>
                    <td><img :src="item.img" height="100px"></td>
                </tr>
                </tbody>
            </table>
            <div class="namtc-pagination">
                <el-pagination @current-change="handleCurrentChange" :current-page="page" :page-size="10"
                               layout="total, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>
        </div>
        <div class="container">
            <transition name="fade">
                <div class="pop-wrapper" v-show="popShow">
                    <div class="pop">
                        <span class="icon del el-icon-close " @click="popShow=false"></span>
                        <el-form labelWidth="70px" :rules="Rules" ref="formRef" :model="news">
                            <el-form-item label="标题：" prop="title">
                                <el-col :span="30">
                                    <el-input v-model="news.title" size="small" placeholder="请输入"></el-input>
                                </el-col>
                            </el-form-item>
                        </el-form>
                        <div class="img">
                            <img :src="news.img" style="display: none" id="img" height="200px"/>
                        </div>
                        <el-upload
                                class="upload-demo myUpload"
                                id="upload"
                                :action="action"
                                :file-list="fileList"
                                :on-success="fileUploadSuccess"
                                ref="upload">
                            <el-button type="primary" slot="trigger" @click="fileList=[]">
                                上传标题图
                            </el-button>
                        </el-upload>
                        <div id="editorElem"></div>
                        <div class="submit">
                            <el-button type="primary" @click="onSubmit">提交</el-button>
                        </div>
                    </div>
                </div>
            </transition>
        </div>
    </div>
</template>
<script>
    import Editor from "wangeditor";

    const datas = {
        title: '',
        content: '',
        img: ''
    };
    export default {
        data() {
            return {
                editor: {},
                popShow: false,
                list: {},
                news: _g.cloneJson(datas),
                Rules: {
                    title: [{
                        required: true,
                        message: '请填写',
                        trigger: 'blur'
                    }],
                },
                action: PATH + 'Website/newsEdit',
                fileList: [],
                page: 1,
                total: 0,
            }
        },
        created() {
            this.getList();
        },
        mounted() {
            let _this = this;
            this.editor = new Editor("#editorElem");
            this.editor.customConfig.uploadImgServer = PATH + "System/upload";
            this.editor.customConfig.uploadFileName = "file[]";
            this.editor.customConfig.customAlert = function (info) {
                _this.$message.error(info);
            };
            this.editor.customConfig.debug=true;
            this.editor.create();
            this.editor.$textContainerElem[0].style.height = "450px";
        },
        methods: {
            onSubmit() {
                this.$refs.formRef.validate(valid => {
                    if (valid) {
                        this.popShow = false;
                        this.news.content = this.editor.txt.html();
                        this.apiPost("Website/newsEdit", this.news).then(res => {
                            let remind = res.error ? "error" : "success";
                            _g.toastMsg(remind, res.msg);
                            if (!res.error) {
                                this.getList();
                            } else {
                                this.popShow = true;
                            }
                        });
                    } else {
                        return false;
                    }
                });
            },
            getList() {
                this.apiPost("Website/news", {page: this.page}).then(res => {
                    this.list = res.list;
                    this.total = parseInt(res.total);
                });
            },
            openAddForm() {
                this.popShow = true;
                this.editor.txt.html('');
                this.news = _g.cloneJson(datas);
                document.getElementById('upload').style.display = 'block';
                document.getElementById('img').style.display = 'none';
                setTimeout(() => {
                    this.$refs.formRef.resetFields();
                })

            },

            edit(id) {
                let data = {id: id};
                this.apiPost("Website/newsDetail", data).then(res => {
                    this.popShow = true;
                    setTimeout(() => {
                        this.$refs.formRef.resetFields();
                        this.news = res;
                        this.editor.txt.html(res.content);
                        document.getElementById('upload').style.display = 'block';
                        document.getElementById('img').style.display = 'none';
                    }, 0);
                });
            },
            Del(id) {
                this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                })
                    .then(() => {
                        let data = {id: id};
                        this.apiPost("Website/newsDel", data).then(res => {
                            let remind = res.error ? "error" : "success";
                            _g.toastMsg(remind, res.msg);
                            if (!res.error) {
                                this.getList();
                            }
                        });
                    })
                    .catch(() => {
                    });
            },
            /* 图片上传 */
            fileUploadSuccess(res) {
                _g.closeGlobalLoading();
                let remind = res.error ? 'error' : 'success';
                _g.toastMsg(remind, res.msg);
                if (!res.error) {
                    this.fileList = [];
                    this.news.img = res.url;
                    setTimeout(() => {
                        document.getElementById('upload').style.display = 'none';
                        document.getElementById('img').style.display = 'block';
                    }, 0);
                }
            },
            handleCurrentChange(val) {
                this.page = val;
                this.getList()
            },
        }
    };
</script>
<style lang="css" scoped>
    .container {
        box-sizing: border-box;
        width: 100%;
        background: #ffffff;
        min-height: 100%;
        font-size: 14px;
        overflow: hidden;
    }

    .container .el-form {
        width: 500px;
        margin: 50px auto;
    }

    #editorElem {
        width: 90%;
        margin: 20px auto;
    }

    .submit {
        text-align: center;
        margin-top: 30px;
    }

    .add {
        background: url(../../img/add.png) no-repeat;
        width: 24px;
        height: 24px;
    }

    .del1 {
        background: url(../../img/del.png) no-repeat;
    }

    .pop-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
    }

    .pop {
        position: relative;
        width: 55%;
        height: 80%;
        background-color: #fff;
        overflow: auto;
        padding-bottom: 30px;
    }

    .del {
        /* background: url(../../img/del.png) no-repeat; */
        position: absolute;
        right: 8px;
        top: 8px;
    }
    .el-icon-close {
        color: #999;
    }
    .edit {
        background: url(../../img/edit.gif) no-repeat;
        width: 16px;
        height: 16px;
    }

    .myUpload {
        text-align: center;
    }

    #img {
        margin: 0 auto;
    }

    .pop .el-form {
        margin: 20px auto 5px;
    }

</style>